<!DOCTYPE html>
<%@page pageEncoding="UTF-8"%>
<html>
	<head>
		<title>grid-search</title>
		<%@include file="/resource/component.jsp"%>
	</head>
	<body class="fullBody">
		<table style="width:100%;">
			<tr>
				<td style="width:100%;">
					<a class="nui-button" iconCls="icon-add" onclick="add()">增加</a>
					<a class="nui-button" iconCls="icon-edit" onclick="edit()">编辑</a>
					<a class="nui-button" iconCls="icon-remove" onclick="remove()">删除</a>
				</td>
				<td>
					<form id="uploadForm" enctype="multipart/form-data">
						<input name="file" id="file" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel , application/x-zip-compressed" />
					</form>
				</td>
				<td>
					<input type="button" id="fileUpload" onclick="importExcel()" value="导入"/>
				</td>
				<td>
					<input type="button" onclick="exportExcel()" value="导出">
				</td>
			</tr>
		</table>
		<div id="datagrid" class="nui-datagrid" style="margin-top:5px;width:100%;height:70%;" allowAlternating="true" url="http://localhost:8088/Form2/SelectALL"
		 sizeList="[10,20,30,50]" pageSize="20" multiSelect="true">
			<div property="columns">
				<div type="checkcolumn"></div>
				<div type="indexcolumn" width="30" headerAlign="center" align="center">序号</div>
				<div field="id" visible="false" headerAlign="center" align="center">序号</div>
				<div field="name" width="120" headerAlign="center" align="center">申请人姓名</div>
				<div field="age" width="120" headerAlign="center" align="center">申请人年龄</div>
				<div field="minzhu" width="80" headerAlign="center" align="center">申请人民族</div>
				<div field="drr" width="100" headerAlign="center" align="center">导入人</div>
				<div field="drsj" width="80" headerAlign="center" align="center" dateFormat="yyyy-MM-dd HH:mm:ss">导入时间</div>
			</div>
		</div>
		<!-- search -->
		<div class="nui-panel search-wrap" title="查询" iconCls="icon-search" style="margin-top:5px;width:100%;height:160px;">
			<form id="myform1">
				<table class="form-table">
					<tr class="bor">
						<th>申请人姓名</th>
						<td>
							<input name="NAME" class="nui-textbox"/>
						</td>
						<th>申请人年龄</th>
						<td>
							<input name="AGE" class="nui-textbox"/>
						</td>
						<th>申请人民族</th>
						<td>
							<input name="MINZHU" class="nui-textbox"/>
						</td>
					</tr>
					<tr class="bor">
						<th>申请人姓名</th>
						<td>
							<input name="" class="nui-textbox"/>
						</td>
						<th>推荐人姓名</th>
						<td>
							<input name="" class="nui-textbox"/>
						</td>
						<th>审批人姓名</th>
						<td>
							<input name="" class="nui-textbox"/>
						</td>
					</tr>
				</table>
			</form>
			<div class="btns-center">
				<a class="nui-button" iconCls="icon-search" onclick="search()">查询</a>
				<a class="nui-button" iconCls="icon-reload" onclick="resetshuju()">重置</a>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	nui.parse();

	var datagrid = nui.get('datagrid');

	$(function() {
		var pageSize = parseInt(getQueryString("pageSize"));
		if (isNaN(pageSize)) pageSize = 20;

		datagrid.load({
			pageSize: pageSize
		});

		// 关闭加载效果
		$("#loading").fadeOut();
	})

	//导出表格
	function exportExcel() {
		var rows = datagrid.getSelecteds();
		var IDs="";
		for (var i = 0, l = rows.length; i < l; i++) {
			var row = rows[i];
			IDs += row.id;
			if (i != l - 1) IDs += ",";
		}
		console.log(IDs);
		if (rows.length > 0) {
			if (confirm("确定导出选中记录？")) {
				datagrid.loading("操作中，请稍后......");
				// $.ajax({
				// 	url: "http://localhost:8088/Excel/form2exportExcel",
				// 	data:{IDs:IDs},
				// 	success: function(text) {
				// 		alert("成功")
				// 		datagrid.reload();
				// 	},
				// 	error: function() {}
				// });
				window.location.href = "http://localhost:8088/Excel/form2exportExcel?IDs="+IDs;
				datagrid.reload();
			}
		} else {
			var msg = "导出Excel？\n\n请确认！";
			if (confirm(msg) == true) {
				window.location.href = "http://localhost:8088/Excel/exportExcel2";
			} else {
				return false;
			}
		}
	}

	//导入表格
	function importExcel() {
		var msg = "导入Excel？\n\n请确认！";
		if (confirm(msg) == true) {
			window.location.href = "http://localhost:8088/Excel/importExcel";
		} else {
			return false;
		}
	}

	//删除数据
	function remove() {
		var rows = datagrid.getSelecteds();
		var IDs="";
		for (var i = 0, l = rows.length; i < l; i++) {
			var row = rows[i];
			IDs += row.id;
			if (i != l - 1) IDs += ",";
		}
		console.log(IDs);
		if (rows.length > 0) {
			if (confirm("确定删除选中记录？")) {
				datagrid.loading("操作中，请稍后......");
				$.ajax({
					url: "http://localhost:8088/Form2/delete",
					data:{IDs:IDs},
					success: function(text) {
						alert("成功")
						datagrid.reload();
					},
					error: function() {}
				});
			}
		} else {
			alert("请选中一条记录");
		}
	}

	//按条件查询
	function search() {
		var form = new nui.Form("myform1");
		var data = form.getData();
		// const map = new Map(Object.entries(data));
		console.log(data);
		datagrid.load(data);
	}

	//重置
	function resetshuju(){
		var form = new nui.Form("#myform1");
		form.reset();
	}

	//文件上传 效验
	function importExcel() {
		debugger;
		var msg = "是否上传文件？\n\n请确认！";
		if (confirm(msg) == true) {
			//验证
			// 获取文件对象
			var file = document.getElementById("file").files[0];
			if(file == null) {
				alert("文件不能为空");
				return false;
			}
			// 获取文件名 并分割出 .xxx 的后缀名
			var filename = document.getElementById("file").value;
			var extension = filename.substring(filename.lastIndexOf('.'));
			if(extension!=".xls" && extension!=".xlsx" && extension!=".zip") {
				alert("文件类型只能是 .xls / .xlsx / .zip");
				return false;
			}
			// // 文件大小判断
			// if(file.size > "5242880") {
			// 	alert("图片大小不得大于5M");
			// 	return;
			// }

			//压缩包
			if (extension==".zip"){
				ExcelupZip(file);
				return false;
			}
			console.log(file);
			Excelupdate2(file);
		} else {
			return false;
		}
	}

	//文件上传
	function Excelupdate(file) {
		debugger;
		var formData = new FormData();
		formData.append('abc',file);
		console.log(formData.get("abc"));
		$.ajax({
			url:"http://localhost:8088/Excel/importExcel3",
			type:"POST",
			data:formData,
			cache: false,//不需要缓存
			processData: false,//不需要对数据做处理
			contentType: false,//不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false
			success: function(data) {
				console.log(data);
				alert("成功");
				window.location.reload();
			}
		})
	}
	function Excelupdate2(file) {
		debugger;
		var formData = new FormData();
		formData.append('abc',file);
		console.log(formData.get("abc"));
		$.ajax({
			url:"http://localhost:8088/Excel/importExcel",
			type:"POST",
			data:formData,
			cache: false,//不需要缓存
			processData: false,//不需要对数据做处理
			contentType: false,//不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false
			success: function(data) {
				console.log(data);
				alert("成功");
				window.location.reload();
			}
		})
	}
	//压缩包上传
	function ExcelupZip(file) {
		var formData = new FormData();
		formData.append('abc',file);
		console.log(formData.get("abc"));
		$.ajax({
			url:"http://localhost:8088/Excel/ExcelupZip",
			type:"POST",
			data:formData,
			cache: false,//不需要缓存
			processData: false,//不需要对数据做处理
			contentType: false,//不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false
			success: function(data) {
				console.log(data);
				alert("成功");
				window.location.reload();
			}
		})
	}
</script>
